<template>
	<group class="perfGroup">
		<div style="margin-top: 10px; margin-bottom: 10px">
			<div style="text-align: right">
				<span class="blockTitle">绩效</span>
				<button-tab style="width: 120px; float: right; margin-bottom: 10px; margin-right: 10px">
					<button-tab-item selected @on-item-click="fetchData(0)">日</button-tab-item>
					<button-tab-item @on-item-click="fetchData(1)">周</button-tab-item>
					<button-tab-item @on-item-click="fetchData(2)">月</button-tab-item>
				</button-tab>
			</div>
		</div>
		<x-table full-bordered style="background-color:#fff;">
			<thead>
			<tr class="teacherRankTable">
				<th>电话</th>
				<th>到访</th>
				<th>试听</th>
				<th>签约</th>
				<th>原始单</th>
				<th>准客户</th>
				<th>客户</th>
			</tr>
			</thead>
			<tbody>
			<!--<tr v-for="item in itemList">-->
			<tr>
				<td>{{telNumber}}</td>
				<td>{{visitNumber}}</td>
				<td>{{demoNumber}}</td>
				<td>{{contractNumber}}</td>
				<td>{{rawCusNumber}}</td>
				<td>{{poCusNumber}}</td>
				<td>{{cusNumber}}</td>
			</tr>
			</tbody>
		</x-table>
	</group>

</template>

<script>
	import NetWorking from '@/utils/networking'
	import dateutils from '@/utils/date'
	import {Group, XTable, XButton, ButtonTab, ButtonTabItem} from 'vux'
	export default {
		name: "perf-table",
		components: {
			Group,
			XTable,
			XButton,
			ButtonTab,
			ButtonTabItem
		},
		data () {
			return {
				username: '',
				date: '',
				telNumber: 0,
				visitNumber: 0,
				demoNumber: 0,
				contractNumber: 0,
				poCusNumber: 0,
				cusNumber: 0,
				rawCusNumber: 0
			}
		},
		created: function () {
			this.username = this.$store.state.user.userModel.sysUser.username
			this.date = dateutils.getDate(new Date())
			this.fetchData(0)
		},
		methods: {
			clearData: function () {
				this.telNumber = 0
				this.visitNumber = 0
				this.demoNumber = 0
				this.contractNumber = 0
				this.poCusNumber = 0
				this.cusNumber = 0
				this.rawCusNumber = 0
			},
			fetchData: function (type) {
				this.clearData()

				let _this = this
				NetWorking.doGet(
					'ai/sales/getPerformanceByUser',
					null,
					{
						params: {
							date: this.date,
							type: type,
							username: this.username
						}
					}
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							if(rs.telNumber != null){
								_this.telNumber = rs.telNumber.value
							}
							if(rs.visitNumber != null){
								_this.visitNumber = rs.visitNumber.value
							}
							if(rs.demoNumber != null){
								_this.demoNumber = rs.demoNumber.value
							}
							if(rs.contractNumber != null){
								_this.contractNumber = rs.contractNumber.value
							}
							if(rs.poCusNumber != null){
								_this.poCusNumber = rs.poCusNumber.value
							}
							if(rs.cusNumber != null){
								_this.cusNumber = rs.cusNumber.value
							}
							if(rs.rawCusNumber != null){
								_this.rawCusNumber = rs.rawCusNumber.value
							}
						}else{
							alert(rs.error_message)
						}
					}
				)
			}
		}
	}
</script>

<style>
	.perfGroup > .weui-cells > .vux-table {
		line-height: 30px !important;;
	}

	.perfGroup {
		margin-bottom: 10px;
	}

	.perfGroup > .weui-cells {
		margin-top: 0em;
	}
</style>